<template>
  <div>
    <div v-if="store.state.info.length == 0">
      <van-empty description="购物车快饿瘪了T.T">
        <van-button @click="toHome" round type="primary" class="bottom-button"
          >去逛逛</van-button
        >
      </van-empty>
    </div>
    <div v-else>
      <van-cell-group inset>
        <van-cell title="购物车" value="编辑" icon="cart-o" />
        <van-cell class="box">
          <van-checkbox v-model="checked">复选框</van-checkbox>
          <van-swipe-cell>
            <van-card
              price="2.00"
              desc="描述信息"
              title="商品标题"
              class="goods-card"
              thumb="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
            >
              <template #num>
                <van-stepper v-model="value" />
              </template>
            </van-card>
            <template #right>
              <van-button
                square
                text="删除"
                type="danger"
                class="delete-button"
              />
            </template>
          </van-swipe-cell>
        </van-cell>
      </van-cell-group>
    </div>
  </div>
</template>

<script setup>
// 引入vuex
import { useStore } from "vuex";
// 引入路由
import { useRouter } from "vue-router";
let store = useStore();
let router = useRouter();

let toHome = () => {
  router.push("/home");
};
console.log(store.state.info);
</script>

<style scoped>
.goods-card {
  margin: 0;
  background-color: white;
}
.box {
  display: flex;
}

.box > div:nth-child(1) {
  width: 50px;
}
.bottom-button {
  width: 160px;
  height: 40px;
}
</style>